<!-- 购买详情页面 -->
<template>
	<view class="buydetails">
		<view class="top">
			<image :src="coupon_img_1" mode="scaleToFill"></image>
			<view class="m-tit">
				<text>{{name}}</text>
				<text>{{left_num}}张</text>
			</view>
			<view class="f-tit">
				<text>有效期：{{start_time}}-{{end_time}}</text>
				<text>剩余</text>
			</view>
		</view>
		<view class="m-box">
			<view class="t-item">
				<p>使用流程</p>
				<view class="lz-box">
					<view class="item">
						<image src="../../../static/images/gou.png" mode="aspectFit"></image>
						<text>支付成功</text>
					</view>
					<view class="item">
						<image src="../../../static/images/quan.png" mode="aspectFit"></image>
						<text>到店展示券</text>
					</view>
					<view class="item">
						<image src="../../../static/images/erweima.png" mode="aspectFit"></image>
						<text>展示二维码核销</text>
					</view>
				</view>
			</view>
			<view class="item-1">
				<text>使用场景</text>
				<text>{{scene_label}}</text>
			</view>
			<view class="item-1">
				<text>商户名称</text>
				<text>{{company_name}}</text>
			</view>
			<view class="item-2">
				<view class="left">
					<text>商户位置</text>
					<view class="right">
						<text>{{city}}{{area}}</text>
						<image src="../../../static/images/dinwei.png" mode="aspectFit"></image>
					</view>
				</view>
				<p>{{address}}</p>
			</view>
			<view class="item-1">
				<text>使用时间</text>
				<text>{{start_time}}-{{end_time}}</text>
			</view>
			<view class="item-1">
				<text>商户领取限额</text>
				<text>{{company_num}}张</text>
			</view>
			<view class="item-1">
				<text>个人领取限额</text>
				<text>{{person_num}}张</text>
			</view>
			<view class="item-1">
				<text>商家电话</text>
				<text @tap="phoneCall">{{link_mobile}}</text>
			</view>
			<view class="sygz-box">
				<text>使用说明</text>
				<view class="item-tit">
					<p>{{rule}}</p>
				</view>
			</view>
		</view>
		<view @click="openmask" class="b-btn">
			<button>点击发放</button>
		</view>
		<!-- 点击发放弹出模态框 -->
		<u-mask class="mask" :show="show" @click="show = false">
			<view class="mask-box">
				<view class="image-box">
					<image :src="coupon_img_4" mode="scaleToFill"></image>
					<image :src="ewmImg" mode="aspectFit"></image>
					<text>扫一扫获取更多优惠券</text>
				</view>
				<image src="../../../static/images/gb.png" mode="aspectFit"></image>
				<p>点击保存图片</p>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				show: false,
				id:'',
				erweimaID:'',
				coupon_img_1:'',
				name:'',
				left_num:'',
				start_time:'',
				end_time:'',
				scene_label:'',
				city:'',
				area:'',
				address:'',
				link_mobile:'',
				company_name:'',
				rule:'',
				company_num:'',
				person_num:'',
				ewmImg:'',
				coupon_img_4:'',
			}
		},
		onLoad(e) {
			// console.log(e.id)
			this.id = e.id
			this.getCouponCenterDetailById()
		},
		methods: {
			async getCouponCenterDetailById(){//获取发放卡券信息
				const res = await this.$myRequest({
					url:'/api/businessCoupon/getCouponCenterDetailById?id='+this.id
				}).then((res) => {
					console.log(res.data.data)
					this.coupon_img_1 = res.data.data.coupon_info.coupon_img_1
					this.name = res.data.data.coupon_info.name
					this.company_name = res.data.data.company_name
					this.left_num = res.data.data.left_num
					this.start_time = res.data.data.start_time
					this.end_time = res.data.data.end_time
					this.scene_label = res.data.data.scene_label
					this.city = res.data.data.coupon_info.city
					this.area = res.data.data.coupon_info.area
					this.address = res.data.data.coupon_info.address
					this.link_mobile = res.data.data.coupon_info.link_mobile
					this.rule = res.data.data.coupon_info.rule
					this.company_num = res.data.data.coupon_info.company_num
					this.person_num = res.data.data.coupon_info.person_num
					this.erweimaID = res.data.data.id
				})
			},
			async openmask(){//商户发放卡券信息、获取发放二维码
				 const res = await this.$myRequest({
					 url:'/api/businessCoupon/grantCoupon?id='+this.erweimaID
				 }).then((res) => {
					 // console.log(res.data.data)
					if(res.data.code === 200){
						this.show = true
						this.ewmImg = res.data.data.url
					 this.coupon_img_4 = res.data.data.coupon_img_4
					}else{
						this.$refs.uToast.show({
							title:'获取二维码失败！',
							type:'error'
						})
					}
					 
				 })
			},
			phoneCall(){//拨打电话
				var _this = this
				uni.makePhoneCall({
				    phoneNumber: _this.link_mobile 
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.buydetails{
		.top{
			background-color: #FFFFFF;
			padding: 20rpx 32rpx 34rpx 32rpx;
			image{
				width: 100%;
				height: 252rpx;
				margin-bottom: 28rpx;
			}
			.m-tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 6rpx;
				text{
					font-size: 40rpx;
					font-weight: bold;
					color: #3C3C3C;
				}
				text:nth-child(2){
					color: #EC5F2F;
				}
			}
			.f-tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 24rpx;
					color: #8B8B8B;
				}
				text:nth-child(2){
					font-size: 28rpx;
					color: #8B8B8B;
					
				}
			}
		}
		.m-box{
			padding: 20rpx 32rpx 30rpx 32rpx;
			background-color: #FFFFFF;
			margin-top: 16rpx;
			.t-item{
				margin-bottom: 40rpx;
				p{
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: bold;
				}
				.lz-box{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item{
						display: flex;
						align-items: center;
						image{
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
						text{
							font-size: 24rpx;
							color: #8B8B8B;
							font-weight: bold;
						}
					}
				}
			}
			.item-1{
				padding: 34rpx 0;
				border-top: 2rpx solid #F6F6F7;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				text:nth-child(2){
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: 200;
				}
			}
			.item-2{
				padding: 34rpx 0;
				border-top: 2rpx solid #F6F6F7;
				.left{
					display: flex;
					justify-content: space-between;
					text{
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
					}
					.right{
						display: flex;
						align-items: center;
						text{
							font-size: 32rpx;
							color: #3C3C3C;
							font-weight: 200;
						}
						image{
							width: 19rpx;
							height: 27rpx;
							margin-left: 30rpx;
						}
					}
				}
				p{
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: 200;
					text-align: right;
					margin-top: 32rpx;
				}
			}
			.sygz-box{
				margin-top: 68rpx;
				text{
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: bold;
				}
				.item-tit{
					margin-top: 20rpx;
					line-height: 40rpx;
					p{
						font-size: 28rpx;
						font-weight: 200;
						color: #3C3C3C;
					}
				}
			}
		}
		.b-btn{
			padding: 20rpx 32rpx 88rpx 32rpx;
			background-color: #FFFFFF;
			button{
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
				background: linear-gradient(#FFB487,#EC5F2F);
				color: #FFFFFF;
				font-size: 36rpx;
			}
			
		}
		.mask{
			.mask-box{
				text-align: center;
				padding: 60rpx 32rpx 148rpx 32rpx;
				.image-box{
					width: 100%;
					height: auto;
					position: relative;
					text-align: center;
					image{
						width: 100%;
						height: 70vh;
						border-radius: 20rpx;
					}
					image:nth-child(2){
						width: 224rpx;
						height: 224rpx;
						position: absolute;
						// left: calc(25%-112rpx);
						left: 50%;
						margin-left: -112rpx;
						top: 50%;
						margin-top: 112rpx;
					}
					text{
						position: relative;
						bottom: 60rpx;
						// margin-left: 50%;
						// margin-bottom: 30rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				image{
					width: 56rpx;
					height: 56rpx;
					margin-top: -24rpx;
				}
				p{
					font-size: 28rpx;
					color: #FFFFFF;
					margin-top: 32rpx;
				}
			}
		}
	}
</style>
